<template>
  <div>
    <SearchBar></SearchBar>
    <main>
      <Swiper :list="slidelist" auto loop></Swiper>
      <Tieku><span>按病找药</span></Tieku>
      <div id="department">
        <div class="department-cell">
          <div><img src="/static/img/男.png" alt=""></div>
          <p>男科</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/两性健康.png" alt=""></div>
          <p>两性健康</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/肿瘤.png" alt=""></div>
          <p>肿瘤科</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/肝胆脾胰肾.png" alt=""></div>
          <p>肝胆科</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/胃.png" alt=""></div>
          <p>消化科</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/心脏.png" alt=""></div>
          <p>心脑血管科</p>
        </div>
        <div class="department-cell">
          <div><img src="/static/img/脑瘤.png" alt=""></div>
          <p>神经科</p>
        </div>
        <div class="department-cell" v-show="more" @touchstart="showmore">
          <div><img src="/static/img/更多.png" alt=""></div>
          <p>更多</p>
        </div>
        <div class="department-cell" v-show="!more">
          <div><img src="/static/img/女.png" alt=""></div>
          <p>女科</p>
        </div>
        <div class="department-cell" v-show="!more">
          <div><img src="/static/img/皮肤科.png" alt=""></div>
          <p>皮肤科</p>
        </div>
        <div class="department-cell" v-show="!more" >
          <div><img src="/static/img/婴幼.png" alt=""></div>
          <p>婴幼</p>
        </div>
        <div class="department-cell" v-show="!more" @touchstart="showmore">
          <div><img src="/static/img/收起.png" alt=""></div>
          <p>收起</p>
        </div>
      </div>
      <Tieku><span>先领卷，后买药</span></Tieku>
    </main>
    <TabBar></TabBar>
  </div>
</template>

<script>
  import {Swiper} from 'vux'
  import SearchBar from "../components/SearchBar.vue"
  import Tieku from "../components/Tieku.vue"
  import TabBar from "../components/TabBar.vue"
export default {
  data () {
    return {
      slidelist:[],
      more:true
    }
  },
  components:{
    SearchBar,
    Swiper,
    Tieku,
    TabBar,
  },
  mounted:function () {
    this.http.get("/api/slideshow")
      .then( res => {
        this.slidelist = res.data.slideimg
      })
  },
  methods:{
    showmore:function () {
      this.more = !this.more
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  main{
    margin-top: 50px;
    background-color: #eeeeee;
  }
  #department{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
  }
  .department-cell{
    width: 25vw;
    height: 25vw;
    /*border: solid 1px #121212;*/
    text-align: center;
    font-size: 14px;
  }
  .department-cell div{
    background-color: #d5e696;
    width: 15vw;
    height: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5vw;
    border-radius: 50%;
    margin-top: 8px;
  }
</style>
